<template>
  <div class="editStaff">
    <el-dialog
      title="修改员工信息"
      :center="true"
      :visible.sync="editDialogVisible"
      width="60%"
      :before-close="editStaffCancel"
    >
      <el-form
        label-width="100px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <div class="right">
          <el-form-item label="姓名" prop="name">
            <el-input placeholder="请输入" v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input placeholder="请输入" v-model="editForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="dateBirth">
            <el-date-picker
              type="date"
              v-model="editForm.dateBirth"
              placeholder="请选择时间(年/月/日)"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="岗位" prop="sname">
            <el-select placeholder="从岗位列表获取数据" v-model="editForm.sid">
              <el-option
                v-for="item in postList"
                :key="item.id"
                :label="item.stationName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属供应商" prop="pname">
            <el-select
              placeholder="获取供应商管理的数据"
              v-model="editForm.pid"
            >
              <el-option
                v-for="item in supplierList"
                :key="item.id"
                :label="item.providerName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="editForm.background">
              <el-option label="本科" value="本科"></el-option>
              <el-option label="专科" value="专科"></el-option>
              <el-option label="研究生" value="研究生"></el-option>
              <el-option label="博士" value="博士"></el-option>
              <el-option label="小初高" value="小初高"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业">
            <el-input placeholder="请输入" v-model="editForm.major"></el-input>
          </el-form-item>
        </div>
        <div class="left">
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="editForm.sex">
              <el-radio-button
                v-for="item in sexList"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input placeholder="请输入" v-model="editForm.email"></el-input>
          </el-form-item>
          <el-form-item label="身份证" prop="idNumber">
            <el-input
              placeholder="请输入"
              v-model="editForm.idNumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="级别" prop="rank">
            <el-select v-model="editForm.rank">
              <el-option
                v-for="item in rankList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入职时间" prop="hiredate">
            <el-date-picker
              type="date"
              v-model="editForm.hiredate"
              placeholder="请选择时间(年/月/日)"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="毕业院校">
            <el-input placeholder="请输入" v-model="editForm.school"></el-input>
          </el-form-item>
          <el-form-item label="毕业时间" prop="graduationDate">
            <el-date-picker
              type="date"
              v-model="editForm.graduationDate"
              value-format="yyyy-MM-dd"
              placeholder="请选择时间(年/月/日)"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editStaffCancel">取 消</el-button>
        <el-button type="primary" @click="editStaff">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { isIdentityId } from "./validate";
export default {
  name: "EditStaff",
  props: [
    "editDialogVisible",
    "editForm",
    "postList",
    "supplierList",
    "rankList",
  ],
  data() {
    // 校验身份证数据
    var checkIdentitytionId = (rule, value, callback) => {
      var errorMsg = isIdentityId(value);
      if (errorMsg != "") {
        this.verifyq = 1;
        callback(new Error(errorMsg));
      } else {
        this.verifyq = 0;
      }
    };
    return {
      //               姓名          联系电话   出生日期    岗位   所属供应商      学历       专业    性别     邮箱    身份证  级别     入职时间     毕业学校    毕业时间
      staffList: {
        name: "",
        phone: "",
        dateBirth: "",
        sid: "",
        pid: "",
        background: "",
        major: "",
        sex: "",
        email: "",
        idNumber: "",
        rank: "",
        hiredate: "",
        school: "",
        graduationDate: "",
      },
      sexList: [
        { value: 0, label: "男" },
        { value: 1, label: "女" },
      ],
      rules: {
        name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位手机号", trigger: "blur" },
        ],
        dateBirth: [
          { required: true, message: "请选择出生日期", trigger: "blur" },
        ],
        sname: [{ required: true, message: "请选择岗位", trigger: "blur" }],
        pname: [
          { required: true, message: "请选择所属供应商", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        idNumber: [
          { required: true, validator: checkIdentitytionId, trigger: "blur" },
        ],
        rank: [{ required: true, message: "请选择级别", trigger: "blur" }],
        hiredate: [
          { required: true, message: "请选择入职时间", trigger: "blur" },
        ],
        graduationDate: [
          { required: true, message: "请选择毕业时间", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 取消修改按钮
    editStaffCancel() {
      this.$emit("editStaffCancel", false);
      this.$message("已取消修改");
    },
    // 确认修改按钮
    editStaff() {
      if (
        this.editForm.name == "" ||
        this.editForm.phone == "" ||
        this.editForm.dateBirth == "" ||
        this.editForm.sname == "" ||
        this.editForm.idNumber == "" ||
        this.editForm.email == "" ||
        this.editForm.hiredate == "" ||
        this.editForm.graduationDate == "" ||
        this.editForm.pname == ""
      ) {
        this.$message({
          message: "请填写必填项",
          type: "warning",
        });
      } else {
        this.$emit("editStaff", false);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 220px;
}
.el-form {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
span {
  display: flex;
  justify-content: space-evenly;
}
</style>
